<template>
	<view>
		<form class="content" @submit="formSubmit">
			<view class="textarea-wapper">
					<textarea id="textarea" name="suggestText" rows="5" placeholder="请说明一下您遇到的问题…"></textarea>
			</view>
			<view class="contact">
				<input type="number" name="contactWay" placeholder="请输入联系方式" maxlength="11" />
			</view>
			<button class="submit-button" formType="submit">
				提交
			</button>
		</form>
	</view>
</template>

<script>
	import util from '../../../utils/util.js'
	import { mineModule } from "../../../modules/mine.js"
	const Mine = new mineModule()
	
	export default {
		data() {
			return {
				
			};
		},
		methods: {
			 formSubmit (e) {
						let { suggestText, contactWay } = e.detail.value
						const isState =  suggestText && contactWay 
						this._onCheck(isState)
							.then(()=>{
								return this._phoneCheck(contactWay)
							})
							.then(()=>{
								return Mine.postSuggest(suggestText, contactWay)
							})
							.then((res)=>{
								uni.showToast({
									icon: 'success',
									title: '提交成功！'
								})
								setTimeout(()=>{
									uni.navigateBack()
								},1000)
							})
							.catch((res)=>{
								util.tost(res)
							})
        },
				
				_onCheck (isState) { // 检验是否 都填写完整
					return new Promise((resolve, reject)=>{
						isState? resolve() : reject('请填写完整')
					})
				},
				_phoneCheck(contactWay) { // 手机校验
					return new Promise((resolve, reject)=>{
						const isOk =  util.verifyPhone(contactWay)
						if (isOk ) resolve() 
					})
				}
		} 
	}
</script>

<style lang="scss">
	@import "../../../common/scss/common.scss";
	page{
		background-color: #FFFFFF;
	}
	.textarea-wapper{
		width: 100%;
		textarea{
			width: 100%;
			padding: ws(15);
			box-sizing: border-box;
			font-size: ws(16);
		}
	}
	.contact{
		padding: ws(10) 0;
		margin: 0 ws(15);
		border-top: 1upx solid #eee;
		border-bottom: 1upx solid #eee;
	}
	
	.submit-button{
	    height: ws(44);
	    border-radius: ws(40);
	    margin: 0 ws(30);
	    background-color: #2A83FF;
	    box-shadow: 0 ws(1) ws(3) rgba(#2A83ff,.5);
	    color: #fff;
	    line-height: ws(44);
	    text-align: center;
	    margin-top: ws(200);
	}
	
</style>
